<template>
  <div class="map-view">
    <!-- 地图容器 -->
    <div id="map-container" ref="mapContainer" class="map-container"></div>
    
    <!-- 地图叠加层 - 已移除，避免与左侧边栏重复 -->
    <!-- <MapOverlay 
      v-if="mapData"
      :visible="showOverlay"
      :map-data="mapData"
      :stations-data="stationsData"
      @point-to-station="handlePointToStation"
    /> -->
    
    <!-- 图例 - 已隐藏 -->
    <!-- <div class="map-legend">
      <h4>🎨 图例说明</h4>
      <div class="legend-item">
        <div class="legend-icon icon-center">中</div>
        <span>中心站（紫色）</span>
      </div>
      <div class="legend-item">
        <div class="legend-icon icon-normal">普</div>
        <span>普通站（绿色）</span>
      </div>
      <div class="legend-item">
        <div class="legend-icon icon-building">🏢</div>
        <span>楼宇（管辖色）</span>
      </div>
      <div class="legend-tips">
        🏷️ 工作站标签：紫/绿固定色<br>
        🌈 管辖范围：独特配色区分<br>
        🏢 楼宇颜色：跟随所属工作站
      </div>
    </div> -->
    
    <!-- 加载提示 -->
    <div 
      v-loading="loading"
      element-loading-text="正在加载地图..."
      element-loading-background="rgba(0, 0, 0, 0.8)"
      :style="loading ? 'position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999;' : ''"
    ></div>
  </div>
</template>

<script setup>
import { ref, watch, onMounted, onBeforeUnmount, nextTick } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import AMapLoader from '@amap/amap-jsapi-loader'
import html2canvas from 'html2canvas'
import { useMapMarkers } from '../composables/useMapMarkers'

const props = defineProps({
  mapData: {
    type: Object,
    default: null
  }
})

const emit = defineEmits(['map-loaded'])

// 地图相关
const mapContainer = ref(null)
const map = ref(null)
const loading = ref(false)

// 状态
const showJurisdiction = ref(true)
const showLabels = ref(true)
const is3D = ref(true)  // 默认为3D模式
const rotation = ref(0)  // 旋转角度（0-360度）
const pitch = ref(50)  // 俯仰角度（0-83度）

// 使用组合式函数管理标记
const {
  markers,
  stationsData,
  addStationMarker,
  addBuildingMarker,
  drawJurisdiction,
  clearAll
} = useMapMarkers()

// 初始化地图
const initMap = async () => {
  try {
    loading.value = true
    
    // 加载高德地图
    const AMap = await AMapLoader.load({
      key: '1e18ef238bc0180d40faa32117a41887',
      version: '2.0',
      plugins: ['AMap.Scale', 'AMap.ToolBar', 'AMap.Geocoder']
    })
    
    // 创建地图实例（默认3D模式）
    map.value = new AMap.Map('map-container', {
      zoom: 12,
      center: [116.195, 39.914],
      mapStyle: 'amap://styles/whitesmoke',
      viewMode: '3D',
      pitch: 50,  // 俯仰角度（0-83度，推荐40-60）
      rotation: 0  // 旋转角度
    })
    
    // 添加控件
    map.value.addControl(new AMap.Scale())
    map.value.addControl(new AMap.ToolBar({
      position: {
        top: '20px',
        left: '20px'
      }
    }))
    
    console.log('✓ 地图初始化完成')
    emit('map-loaded')
    
    // 地图初始化完成后，如果已经有数据，立即加载
    if (props.mapData) {
      await nextTick()
      console.log('🚀 地图初始化完成，开始加载数据:', props.mapData.地图名称)
      loadMapData()
    }
  } catch (error) {
    console.error('地图初始化失败:', error)
    ElMessage.error('地图初始化失败: ' + error.message)
  } finally {
    loading.value = false
  }
}

// 加载地图数据（性能优化版）
const loadMapData = async () => {
  if (!map.value || !props.mapData) {
    console.warn('⚠️ 无法加载数据:', !map.value ? '地图未初始化' : '无地图数据')
    return
  }
  
  console.log('🗺️ 开始加载地图数据:', props.mapData.地图名称)
  
  try {
    // 不显示loading，避免阻塞（标记加载很快，不需要loading）
    // loading.value = true
    
    // 清除现有标记
    clearAll(map.value)
    
    const data = props.mapData.数据
    const stations = data.工作站列表 || data.工作站点位 || []
    const buildings = data.楼宇列表 || []
    
    console.log(`📊 数据统计: ${stations.length} 个工作站, ${buildings.length} 个楼宇`)
    
    // 过滤有效坐标
    const validStations = stations.filter(s => s.经度 && s.纬度)
    // 获取所有工作站名称用于去重
    const stationNames = new Set(validStations.map(s => s.工作站名称))
    
    console.log(`🔍 当前地图工作站: ${validStations.length}个`)
    console.log('🏢 工作站名称:', Array.from(stationNames).slice(0, 5).join(', '), '...')
    
    // 过滤楼宇：1. 有效坐标 2. 名称不与工作站重复
    const allValidBuildings = buildings.filter(b => b.经度 && b.纬度)
    console.log(`📦 原始楼宇数: ${allValidBuildings.length}`)
    
    const duplicateBuildings = allValidBuildings.filter(b => stationNames.has(b.楼宇名称))
    
    if (duplicateBuildings.length > 0) {
      console.log(`🚫 过滤掉 ${duplicateBuildings.length} 个与工作站重名的楼宇:`)
      duplicateBuildings.forEach(b => {
        console.log(`   - ${b.楼宇名称} (${b.纬度}, ${b.经度})`)
      })
    }
    
    const validBuildings = allValidBuildings.filter(b => {
      // 如果楼宇名称与工作站名称完全相同，跳过（只显示工作站）
      const isDuplicate = stationNames.has(b.楼宇名称)
      if (isDuplicate) {
        console.log(`   ✂️ 跳过重复楼宇: ${b.楼宇名称}`)
      }
      return !isDuplicate
    })
    
    console.log(`✅ 最终楼宇数: ${validBuildings.length}`)
    
    console.log('⚡ 开始批量添加标记...')
    const startTime = performance.now()
    
    // 检测位置重叠的工作站
    const overlapGroups = detectOverlappingStations(validStations)
    if (overlapGroups.length > 0) {
      console.log(`⚠️ 检测到 ${overlapGroups.length} 组位置重叠的工作站:`)
      overlapGroups.forEach((group, index) => {
        console.log(`   组 ${index + 1} (${group.length}个工作站):`)
        group.forEach((station, idx) => {
          console.log(`     ${idx + 1}. ${station.工作站名称} (${station.经度}, ${station.纬度})`)
        })
      })
    }
    
    // 创建重叠位置映射（用于确定标签位置）
    const overlapMap = new Map()
    overlapGroups.forEach((group) => {
      // 每个组的所有工作站都在同一个位置
      group.forEach((station) => {
        const key = `${station.经度}_${station.纬度}`
        if (!overlapMap.has(key)) {
          overlapMap.set(key, [])
        }
        overlapMap.get(key).push(station)
      })
    })
    
    // 为每个位置的工作站创建索引映射（用于确定标签位置）
    const stationIndexMap = new Map()
    overlapMap.forEach((stations, key) => {
      stations.forEach((station, index) => {
        stationIndexMap.set(station, index)
      })
    })
    
    // 优化1：直接添加工作站标记，不用setTimeout
    for (let i = 0; i < validStations.length; i++) {
      const station = validStations[i]
      const key = `${station.经度}_${station.纬度}`
      const overlapInfo = overlapMap.get(key)
      
      // 确定标签位置：如果有重叠，根据索引决定左边或右边
      let labelPosition = 'center' // 默认居中（正上方）
      if (overlapInfo && overlapInfo.length > 1) {
        const stationIndex = stationIndexMap.get(station) || 0
        // 第一个在左边，第二个在右边，第三个在左边，以此类推
        labelPosition = stationIndex % 2 === 0 ? 'left' : 'right'
      }
      
      const stationMarker = await addStationMarker(
        map.value,
        station,
        showLabels.value,
        labelPosition
      )
      if (stationMarker && showJurisdiction.value) {
        drawJurisdiction(map.value, station)
      }
    }
    
    // 优化2：楼宇标记也直接添加，不分批延迟
    for (const building of validBuildings) {
      await addBuildingMarker(map.value, building, showLabels.value)
    }
    
    const endTime = performance.now()
    console.log(`✅ 标记添加完成，耗时: ${(endTime - startTime).toFixed(0)}ms`)
    console.log(`📍 已加载 ${validStations.length} 个工作站，${validBuildings.length} 个楼宇`)
    
    // 适应视野（无延迟）
    fitView()
    
    // 移除ElMessage，避免阻塞（改用console.log）
    // ElMessage.success({
    //   message: `已加载 ${validStations.length} 个工作站，${validBuildings.length} 个楼宇`,
    //   duration: 2000
    // })
  } catch (error) {
    console.error('❌ 加载地图数据失败:', error)
    // 只有错误时才显示消息
    ElMessage.error('加载地图数据失败: ' + error.message)
  } finally {
    // loading.value = false  // 已经不使用loading了
  }
}

// 检测位置重叠的工作站（经纬度相同）
const detectOverlappingStations = (stations) => {
  const positionMap = new Map()
  
  stations.forEach(station => {
    const key = `${station.经度}_${station.纬度}`
    if (!positionMap.has(key)) {
      positionMap.set(key, [])
    }
    positionMap.get(key).push(station)
  })
  
  // 返回所有有重叠的位置组（至少2个工作站）
  return Array.from(positionMap.values()).filter(group => group.length > 1)
}

// 重新加载地图
const reloadMap = () => {
  loadMapData()
}

// 适应视野
const fitView = () => {
  if (map.value && markers.value.length > 0) {
    // 禁用动画，立即适应视野
    map.value.setFitView(markers.value, false, [60, 60, 60, 60], 15)
  }
}

// 切换管辖范围显示
const toggleJurisdiction = () => {
  showJurisdiction.value = !showJurisdiction.value
  loadMapData()
}

// 切换标签显示
const toggleLabels = () => {
  showLabels.value = !showLabels.value
  loadMapData()
}

// 切换3D/2D模式（通过调整俯仰角实现）
const toggle3D = () => {
  if (!map.value) return
  
  is3D.value = !is3D.value
  
  if (is3D.value) {
    // 切换到3D视角（俯仰50度）
    const targetPitch = pitch.value > 0 ? pitch.value : 50  // 如果当前是2D，使用50度，否则保持当前角度
    setPitch(targetPitch)
    ElMessage.success('已切换到3D视角')
  } else {
    // 切换到2D视角（俯仰0度）
    setPitch(0)
    ElMessage.success('已切换到2D视角')
  }
}

// 设置旋转角度
const setRotation = (angle) => {
  if (!map.value) return
  
  rotation.value = angle
  map.value.setRotation(angle, true, 300)  // 300ms平滑动画
}

// 设置俯仰角度
const setPitch = (angle) => {
  if (!map.value) return
  
  pitch.value = angle
  map.value.setPitch(angle, true, 300)  // 300ms平滑动画
  
  // 更新3D状态：如果俯仰角为0，认为是2D模式
  is3D.value = angle > 0
}

// 下载地图
const handleDownload = async () => {
  try {
    await ElMessageBox.confirm(
      `<div style="line-height: 1.8;">
        <p><b>📸 推荐方法（地图背景完整）：</b></p>
        <p>1. 按 <kbd>Win + Shift + S</kbd> (Windows) 或 <kbd>Cmd + Shift + 4</kbd> (Mac)</p>
        <p>2. 选择地图区域进行截图</p>
        <p>3. 截图会自动保存到剪贴板</p>
        <br>
        <p><b>🖼️ 或使用下载功能：</b></p>
        <p>点击"确定"尝试导出地图（可能不包含地图底图）</p>
      </div>`,
      '下载地图',
      {
        confirmButtonText: '尝试导出',
        cancelButtonText: '取消',
        dangerouslyUseHTMLString: true,
        type: 'info'
      }
    )
    
    // 用户选择尝试导出
    const { value } = await ElMessageBox.prompt('请输入文件名', '导出地图', {
      confirmButtonText: '导出',
      cancelButtonText: '取消',
      inputValue: props.mapData?.地图名称 || '地图',
      inputPattern: /.+/,
      inputErrorMessage: '文件名不能为空'
    })
    
    loading.value = true
    ElMessage.info('正在生成图片，请稍候...')
    
    await nextTick()
    
    // 等待地图完全渲染
    await new Promise(resolve => setTimeout(resolve, 1000))
    
    const canvas = await html2canvas(mapContainer.value, {
      useCORS: true,
      allowTaint: true,
      foreignObjectRendering: false,
      backgroundColor: '#f5f5f5',
      scale: 2,
      logging: false,
      windowWidth: mapContainer.value.scrollWidth,
      windowHeight: mapContainer.value.scrollHeight,
      onclone: (clonedDoc) => {
        const clonedContainer = clonedDoc.querySelector('#map-container')
        if (clonedContainer) {
          clonedContainer.style.display = 'block'
        }
      }
    })
    
    canvas.toBlob((blob) => {
      const link = document.createElement('a')
      const timestamp = new Date().toISOString().split('T')[0]
      link.download = `${value}_${timestamp}.png`
      link.href = URL.createObjectURL(blob)
      link.click()
      
      ElMessage.success('地图导出成功！（注：可能不包含地图底图，建议使用截图功能）')
    }, 'image/png', 1.0)
  } catch (error) {
    if (error !== 'cancel') {
      console.error('导出失败:', error)
      ElMessage.error('导出失败')
    }
  } finally {
    loading.value = false
  }
}

// 监听地图数据变化（使用防抖，避免频繁更新）
let loadMapDataTimer = null
watch(() => props.mapData, (newVal, oldVal) => {
  // 如果数据变化且地图已初始化
  if (newVal && map.value) {
    console.log('📍 地图数据变化:', oldVal?.地图名称, '→', newVal?.地图名称)
    
    // 清除之前的定时器
    if (loadMapDataTimer) {
      clearTimeout(loadMapDataTimer)
    }
    
    // 立即加载，无延迟
    loadMapData()
  } else if (newVal && !map.value) {
    // 如果地图还未初始化，提示等待
    console.log('⏳ 等待地图初始化完成...')
  }
})

// 生命周期
onMounted(() => {
  initMap()
})

onBeforeUnmount(() => {
  if (map.value) {
    map.value.destroy()
  }
})

// 暴露方法给父组件
defineExpose({
  reloadMap,
  fitView,
  toggle3D,
  toggleJurisdiction,
  toggleLabels,
  handleDownload,
  setRotation,
  setPitch,
  getShowJurisdiction: () => showJurisdiction.value,
  getShowLabels: () => showLabels.value,
  getIs3D: () => is3D.value,
  getRotation: () => rotation.value,
  getPitch: () => pitch.value
})
</script>

<style scoped>
.map-view {
  position: relative;
  width: 100%;
  height: 100%;
}

.map-container {
  width: 100%;
  height: 100%;
}

.map-legend {
  position: absolute;
  bottom: 30px;
  right: 20px;
  background: white;
  padding: 16px;
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
  min-width: 180px;
  z-index: 999;
}

.map-legend h4 {
  font-size: 14px;
  color: #333;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e0e0e0;
  font-weight: 600;
}

.legend-item {
  display: flex;
  align-items: center;
  margin: 10px 0;
  font-size: 13px;
  color: #555;
}

.legend-icon {
  width: 28px;
  height: 28px;
  margin-right: 10px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 12px;
}

.icon-center {
  background: #667eea;
  color: white;
}

.icon-normal {
  background: #48bb78;
  color: white;
}

.icon-building {
  background: #ed8936;
  color: white;
  font-size: 14px;
}

.legend-tips {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #e0e0e0;
  font-size: 11px;
  color: #999;
  line-height: 1.6;
}
</style>

<style>
/* 去掉高德地图标签的默认边框 */
.amap-marker-label {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* 隐藏高德地图的logo和版权信息 */
.amap-logo {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

.amap-copyright {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}
</style>

